<template>
   <div>
       react
       <button @click="add">{{count}}</button>
       <p>{{double}}</p>
   </div>
</template>

<script>
import { computed, reactive,toRefs } from 'vue'
export default {
    /* reactive函数可以设置复杂类型的数据 给页面使用 */
    setup(){
        const state =  reactive({
            count:0,
            add(){
               state.count++
            },
            double:computed(()=>{
                return state.count*2;
            }) 
        })
        console.log(state)
        const refState = toRefs(state);
        console.log(refState)
        /* toRefs可以将reactive函数创建的对象,转化为模板能够理解的普通对象 */
        return {
            ...refState
        }
    }

}
</script>
